<template>
	<view class="main">
		<view class="head">
			<view class="headTitle">
				<view class="headTitle-t">
					<view class="headTitle-tL">
						酒小二
					</view>
					<view class="headTitle-tC"></view>
					<view class="headTitle-tR">
						<text>中山</text>
						<u-icon name="arrow-down" size="28"></u-icon>
					</view>
				</view>
				<view class="headTitle-b">
					营业时间:11:00-凌晨02:00
				</view>
			</view>
			<view class="headSearch">
				<view class="headSearch-l">
					<u-icon name="search" color="rgb(144, 147, 153)" size="30"></u-icon>
					<view class="headSearch-lNotice">
						蒙斯特
					</view>
				</view>
				<view class="headSearch-r">
					<u-icon name="mic" color="rgb(144, 147, 153)" size="34"></u-icon>
					<view class="headSearch-rC"></view>
					<view class="headSearch-rR">
						搜索
					</view>
				</view>
			</view>
			<view class="headTab">
				<view class="headTab-item" v-for="(item,i) in 7">
					漓泉
				</view>
			</view>
			<view class="headNovice">
				<view class="headNovice-title">
					<view class="headNovice-titleL">
						新人专享<text>新人折扣任选一件</text>
					</view>
					<view class="headNovice-titleR">
						进入活动<u-icon name="arrow-right" size="28"></u-icon>
					</view>
				</view>
				<view class="headNovice-coupon">
					<view class="headNovice-couponTitle">
						<view class="headNovice-couponTitle-t">
							当前站点
						</view>
						<view class="headNovice-couponTitle-c">
							我的新人券
						</view>
						<view class="headNovice-couponTitle-b">
							更多福利
						</view>
					</view>
					<view class="headNovice-couponBorder"></view>
					<view class="headNovice-couponItem" v-for="(item,i) in 10">
						<view class="headNovice-couponItem-l">
							<view class="headNovice-couponItem-lT">
								￥<text>30</text>
							</view>
							<view class="headNovice-couponItem-lC">
								中山可用
							</view>
							<view class="headNovice-couponItem-lR">
								满199可用
							</view>
						</view>
						<view class="headNovice-couponItem-r">
							领取
						</view>
					</view>
				</view>
				<view class="headShop">
					<view class="headShop-item" v-for="(item,i) in 10">
						<image src="../../bundle/static/images/bg_kanjia_list.png" mode=""></image>
						<view class="headShop-itemTitle">
							打开拉萨京东i开启节目外婆i的那么请问
						</view>
						<view class="headShop-itemTitle-money">
							￥<text>34</text>.8
						</view>
						<view class="headShop-itemTitle-buy">
							<view class="headShop-itemTitle-buyL">
								￥55
							</view>
							<view class="headShop-itemTitle-buyR">
								选它
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper">
			<u-swiper :list="list"></u-swiper>
		</view>
		<view class="content">
			<view class="tab">
				<view class="tabItem" v-for="(item,i) in 10">
					<image src="../../bundle/static/images/choujiang_name_list.png" mode=""></image>
					<view class="tabItem-text">
						啤酒
					</view>
				</view>
			</view>
			<view class="icon">
				<view class="iconItem" v-for="(item,i) in 4">
					<image src="../../static/home/j-overtime-pay@2x.png" mode=""></image>
					<text>积分商城</text>
				</view>
			</view>
			<view class="seckill">
				<view class="seckillTitle">
					<view class="seckillTitle-l">
						限时秒杀
						<text>活动进行中</text>
					</view>
					<view class="seckillTitle-r">
						更多<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>
				<view class="seckillList">
					<view class="seckillList-item" v-for="(item,i) in 10">
						<image src="../../static/home/j-invite-share-guide.gif" mode=""></image>
						<view class="seckillList-itemMoney">
							<view class="seckillList-itemMoney-l">
								￥<text>0</text>.99
							</view>
							<view class="seckillList-itemMoney-c"></view>
							<view class="seckillList-itemMoney-r">
								￥30.6
							</view>
						</view>
					</view>
				</view>
				<view class="seckillHit">
					*售完截止
				</view>
			</view>
			<view class="box">
				<image class="boxImg" src="../../static/home/j-home-promise@2x.png" mode="widthFix"></image>
				<view class="boxR">
					<view class="boxR-item">
						<view class="boxR-itemL">
							<u-icon name="clock" size="30"></u-icon>
							<text>超时赔付</text>
						</view>
						<!-- <view class="boxR-itemC">
							<u-icon name="checkmark-circle" color="#FF7066"></u-icon>
							正品保真
						</view> -->
						<view class="boxR-itemR">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<image class="poster" src="../../static/user/j-svip@2x.png" mode=""></image>
			<view class="imgs">
				<image src="../../static/user/j-svip@2x.png" mode="widthFix"></image>
				<image src="../../static/user/j-svip@2x.png" mode="widthFix"></image>
			</view>
			<view class="select">
				<view class="selectItem" v-for="(item,i) in 4" :class="i==1?'selectItem-activn':''">
					<image src="../../static/images/notice_icon.png" mode="heightFix"></image>
					<view class="selectItem-text">
						热卖爆品
					</view>
				</view>
			</view>
			<view class="contentShop">
				<view class="contentShop-item" v-for="(item,i) in 20">
					<image class="contentShop-itemT" src="../../static/images/coupon_wrap_bg.png" mode=""></image>
					<view class="contentShop-itemB">
						<view class="contentShop-itemB-title">
							百威进尊亲大顺的亲5.0位打算 1个
						</view>
						<view class="contentShop-itemB-money">
							<view class="contentShop-itemB-moneyL">
								￥<text>4</text>.98
							</view>
							<view class="contentShop-itemB-moneyR">
								选规格
							</view>
						</view>
						<view class="contentShop-itemB-new">
							<view class="contentShop-itemB-newL">
								新人
							</view>
							<view class="contentShop-itemB-newC"></view>
							<view class="contentShop-itemB-newR">
								￥<text>34</text>.98
							</view>
						</view>
						<view class="contentShop-itemB-vip">
							<view class="contentShop-itemB-vipL">
								<u-icon name="integral-fill" size="24"></u-icon>
							</view>
							<view class="contentShop-itemB-vipC"></view>
							<view class="contentShop-itemB-vipR">
								￥<text>34</text>.98
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.main {}

	.head {
		background: url('../../static/user/j-new-default-bg@2x.jpg') no-repeat;
		background-size: 100%;
		padding: 30rpx;
		padding-bottom: 20rpx;
	}

	.swiper {
		margin: 0 30rpx;
	}

	.headTab {
		display: flex;
	}

	.headTab-item {
		background: rgba(0, 0, 0, .3);
		color: #fff;
		font-size: 24rpx;
		margin-right: 30rpx;
		padding: 2rpx 10rpx;
		border-radius: 30rpx;
	}

	.headTitle-t {
		display: flex;
		color: #fff;
		align-items: center;
	}

	.headTitle-tL {
		font-size: 40rpx;
		font-weight: 600;
	}

	.headTitle-tC {
		width: 2rpx;
		height: 30rpx;
		background: #fff;
		margin: 0 12rpx;
	}

	.headTitle-tR {
		font-size: 32rpx;
		font-weight: 600;
	}

	.headTitle-tR text {
		margin-right: 8rpx;
	}

	.headTitle-b {
		color: #fff;
		font-size: 24rpx;
	}

	.headSearch {
		background: #fff;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
		margin: 20rpx 0;
	}

	.headSearch-l {
		display: flex;
		align-items: center;
	}

	.headSearch-r {
		display: flex;
		align-items: center;
	}

	.headSearch-lNotice {
		margin-left: 10rpx;
		color: gray;
	}

	.headSearch-rC {
		width: 2rpx;
		height: 20rpx;
		background: gray;
		margin: 0 16rpx;
	}

	.headSearch-rR {
		color: gray;
	}

	.headNovice {
		background: url('../../static/home/j-home-new-goods-bg@2x.png') no-repeat 100% 100%;
		border: 4rpx solid #fff;
		border-radius: 30rpx;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.headNovice-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.headNovice-titleL {
		font-size: 42rpx;
		font-weight: 600;
		color: #EA0B2C;
		font-style: italic;
	}

	.headNovice-titleL text {
		font-size: 30rpx;
		font-weight: 600;
		font-style: normal;
		margin-left: 20rpx;
	}

	.headNovice-titleR {
		background: linear-gradient(to right, #FD5849, #EF2A38);
		color: #fff;
		font-size: 26rpx;
		padding: 2rpx 10rpx;
		border-radius: 10rpx 0 0 10rpx;
	}

	.headNovice-coupon {
		display: flex;
		overflow: scroll;
		white-space: nowrap;
		background: linear-gradient(to right, #FB4F3A, #EE2737);
		padding: 20rpx;
		border-radius: 16rpx;
		margin: 20rpx 0;
		position: relative;
		align-items: center;
	}

	.headNovice-couponItem {
		background: #FFF1F2;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		-webkit-mask: radial-gradient(circle at 10rpx 10rpx, #0000 10rpx, red 0) -10rpx / 100% 34rpx;
	}

	.headNovice-couponItem-l {
		margin-right: 20rpx;
	}

	.headNovice-couponItem-lT {
		font-size: 20rpx;
		color: #EA0B2C;
	}

	.headNovice-couponItem-lT text {
		font-size: 34rpx;
		font-weight: 600;
	}

	.headNovice-couponItem-lC {
		background: linear-gradient(to right, #FFCFC9, #fff);
		font-size: 20rpx;
		display: inline-block;
		padding: 0 8rpx;
		border-radius: 30rpx;
		color: #EA0B2C;
	}

	.headNovice-couponItem-lR {
		font-size: 20rpx;
		color: #EA0B2C;
	}

	.headNovice-couponItem-r {
		background: #F6D798;
		font-size: 22rpx;
		color: #EA0B2C;
		border-radius: 30rpx;
		padding: 2rpx 10rpx;
	}

	.headNovice-couponTitle {
		margin-right: 50rpx;
	}

	.headNovice-couponTitle-t {
		background: #F6E9BE;
		color: #EA0B2C;
		border-radius: 16rpx 0 16rpx 0;
		position: absolute;
		top: 0;
		font-size: 20rpx;
		padding: 6rpx 10rpx;
		left: 0;
	}

	.headNovice-couponTitle-c {
		color: #fff;
		margin-bottom: 10rpx;
	}

	.headNovice-couponTitle-b {
		background: #F6D798;
		font-size: 22rpx;
		color: #EA0B2C;
		display: inline-block;
		border-radius: 30rpx;
		padding: 2rpx 10rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.headNovice-couponBorder {
		width: 8rpx;
		height: 180rpx;
		background: #F6D798;
		margin: 0 10rpx;
		display: inline-block;
		position: absolute;
		left: 170rpx;
	}

	.headShop {
		display: flex;
		margin-top: 20rpx;
		overflow: scroll;
		white-space: nowrap;
	}

	.headShop-item {
		border: 2rpx solid #FFE9E9;
		padding: 12rpx;
		background: #fff;
		border-radius: 10rpx;
		width: 208rpx;
		margin-right: 12rpx;
	}

	.headShop-item image {
		width: 180rpx;
		height: 200rpx;
	}

	.headShop-itemTitle {
		font-size: 22rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.headShop-itemTitle-money {
		color: #EA0B2C;
		font-size: 20rpx;
	}

	.headShop-itemTitle-money text {
		font-size: 26rpx;
	}

	.headShop-itemTitle-buy {
		display: flex;
		justify-content: space-between;
	}

	.headShop-itemTitle-buyL {
		text-decoration: line-through;
		font-size: 20rpx;
	}

	.headShop-itemTitle-buyR {
		background: linear-gradient(to right, #FB5447, #F2363C);
		color: #fff;
		border-radius: 6rpx;
		padding: 2rpx 10rpx;
		font-size: 22rpx;
		font-weight: 600;
	}

	.content {
		padding: 20rpx 30rpx;
	}

	.tab {
		background: #fff;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		padding-top: 30rpx;
	}

	.tabItem {
		width: 20%;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.tabItem image {
		width: 80rpx;
		height: 90rpx;
	}

	.icon {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx 0;
		padding: 20rpx;
		justify-content: space-between;
	}

	.iconItem {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.iconItem text {
		margin-left: 6rpx;
	}

	.iconItem image {
		width: 30rpx;
		height: 30rpx;
	}

	.seckill {
		background: url('../../static/home/j-home-new-specific-card-def@2x.png')no-repeat;
		background-size: 100% 100%;
	}

	.seckillTitle {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		align-items: center;
	}

	.seckillTitle-l {
		font-size: 36rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
	}

	.seckillTitle-l text {
		background: #EA0B2C;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 6rpx;
		margin-left: 20rpx;
	}

	.seckillList {
		display: flex;
		overflow: scroll;
		white-space: inherit;
	}

	.seckillList-item {
		margin-left: 30rpx;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.seckillList-item image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.seckillTitle-r {
		background: linear-gradient(to right, #FB5447, #F2363C);
		color: #fff;
		border-radius: 6rpx;
		padding: 0 10rpx;
		height: 38rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.seckillList-itemMoney {
		display: flex;
		position: absolute;
		bottom: 0;
		align-items: flex-end;
	}

	.seckillList-itemMoney-l {
		background: #EA0B2C;
		color: #fff;
		font-size: 20rpx;
		height: 46rpx;
		line-height: 46rpx;
		border-radius: 6rpx 0 0 6rpx;
	}

	.seckillList-itemMoney-l text {
		font-size: 26rpx;
	}

	.seckillList-itemMoney-r {
		color: black;
		font-size: 20rpx;
		background: #F5F5F5;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		text-decoration: line-through;
		height: 40rpx;
		line-height: 40rpx;
		padding-right: 8rpx;
	}

	.seckillList-itemMoney-c {
		width: 26rpx;
		height: 46rpx;
		background: linear-gradient(120deg, #EA0B2C, #EA0B2C 50%, #F5F5F5 50%, #F5F5F5 100%);
	}

	.seckillHit {
		color: gray;
		font-size: 20rpx;
		padding-left: 20rpx;
		padding: 20rpx;
	}

	.box {
		position: relative;
	}

	.boxImg {
		width: 100%;
		margin: 20rpx 0;
	}

	.boxR-item {
		display: flex;
		position: absolute;
		align-items: center;
		position: absolute;
		right: 0;
		bottom: 28rpx;
	}

	.boxR-itemL {
		margin-right: 10rpx;
	}

	.boxR-itemL text {
		margin-left: 6rpx;
		font-weight: 600;
		position: relative;
		top: -2rpx;
	}

	.poster {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.imgs image {
		width: calc(50% - 15rpx);
	}

	.imgs {
		justify-content: space-between;
		display: flex;
		margin:20rpx 0;
	}
	.select{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.selectItem{
		text-align: center;
	}
	.selectItem image{
		height: 40rpx;
	}
	.selectItem-text{
		font-size: 24rpx;
		color: gray;
	}
	.selectItem-activn .selectItem-text{
		background: #EA0B2C;
		border-radius: 30rpx;
		color: #fff;
	}
	.contentShop {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	
	.contentShop-item {
		width: calc(50% - 15rpx);
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.contentShop-item:nth-child(odd) {
		margin-right: 28rpx;
	}
	
	.contentShop-itemT {
		width: 100%;
		height: 400rpx;
	}
	
	.contentShop-itemB {
		padding: 10rpx;
		padding-top: 0rpx;
	}
	
	.contentShop-itemB-money {
		display: flex;
		margin: 20rpx 0;
		justify-content: space-between;
	}
	
	.contentShop-itemB-moneyL {
		color: red;
		font-size: 22rpx;
		font-weight: 600;
	}
	
	.contentShop-itemB-moneyL text {
		font-size: 32rpx;
	}
	
	.contentShop-itemB-moneyR {
		background: #FF212A;
		color: #fff;
		font-size: 22rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}
	
	.contentShop-itemB-new {
		display: flex;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.contentShop-itemB-vip {
		display: flex;
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 10rpx;
	}
	
	.contentShop-itemB-newL {
		font-size: 22rpx;
		background: #FF3D00;
		color: #fff;
		padding: 0 6rpx;
	}
	
	.contentShop-itemB-vipL {
		background: black;
		padding: 0 6rpx;
		color: #FFE9CA;
	}
	
	.contentShop-itemB-newR {
		font-size: 20rpx;
		color: red;
		font-weight: 600;
		background: #FFEFE7;
		padding: 0 6rpx;
		border-radius: 0 8rpx 8rpx 0;
	}
	
	.contentShop-itemB-vipR {
		font-size: 20rpx;
		font-weight: 600;
		background: #FFE9CA;
		padding: 0 6rpx;
		border-radius: 0 8rpx 8rpx 0;
	}
	
	.contentShop-itemB-newR text {
		font-size: 24rpx;
	}
	
	.contentShop-itemB-vipR text {
		font-size: 24rpx;
	}
	
	.contentShop-itemB-newC {
		width: 20rpx;
		background: linear-gradient(45deg, #FF3D00, #FF3D00 50%, #FFEFE7 50%, #FFEFE7 100%);
	}
	
	.contentShop-itemB-vipC {
		width: 20rpx;
		background: linear-gradient(45deg, black, black 50%, #FFE9CA 50%, #FFE9CA 100%);
	}
</style>
